
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>起步 - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro|Dosis:300,500' rel='stylesheet' type='text/css'> -->
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "教程"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link current">教程</a></li>
<li><a href="/api/" class="nav-link">API</a></li>
<li><a href="/examples/" class="nav-link">示例</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link current">教程</a></li>
<li><a href="/api/" class="nav-link">API</a></li>
<li><a href="/examples/" class="nav-link">示例</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
    <div class="list">
        <h2>教程</h2>
        <ul class="menu-root">
            
                <li>
                    <a href="/guide/installation.html" class="sidebar-link">安装</a>
                </li>
            
                <li>
                    <a href="/guide/index.html" class="sidebar-link current">起步</a>
                </li>
            
                <li>
                    <a href="/guide/directives.html" class="sidebar-link">指令</a>
                </li>
            
                <li>
                    <a href="/guide/filters.html" class="sidebar-link">过滤器</a>
                </li>
            
                <li>
                    <a href="/guide/list.html" class="sidebar-link">列表渲染</a>
                </li>
            
                <li>
                    <a href="/guide/events.html" class="sidebar-link">事件监听</a>
                </li>
            
                <li>
                    <a href="/guide/forms.html" class="sidebar-link">处理表单</a>
                </li>
            
                <li>
                    <a href="/guide/computed.html" class="sidebar-link">计算属性</a>
                </li>
            
                <li>
                    <a href="/guide/custom-directive.html" class="sidebar-link">自定义指令</a>
                </li>
            
                <li>
                    <a href="/guide/custom-filter.html" class="sidebar-link">自定义过滤器</a>
                </li>
            
                <li>
                    <a href="/guide/components.html" class="sidebar-link">组件系统</a>
                </li>
            
                <li>
                    <a href="/guide/transitions.html" class="sidebar-link">过渡效果</a>
                </li>
            
                <li>
                    <a href="/guide/application.html" class="sidebar-link">创建大型应用</a>
                </li>
            
                <li>
                    <a href="/guide/extending.html" class="sidebar-link">扩展 Vue</a>
                </li>
            
                <li>
                    <a href="/guide/best-practices.html" class="sidebar-link new">细节与最佳实践</a>
                </li>
            
                <li>
                    <a href="/guide/faq.html" class="sidebar-link">常见问题</a>
                </li>
            
            <li><a href="http://legacy.vuejs.org">旧版 0.11 文档</a></li>
            <li style="margin:10px 0 3px">
              <script data-gittip-username="yyx990803"
                data-gittip-widget="button"
                src="//gttp.co/v1.js"></script>
            </li>
        </ul>
    </div>
</div>


<div class="content 教程 with-sidebar">
    <h1>起步</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <h2 id="介绍">介绍</h2><p>Vue.js 是一个用于创建 web 交互界面的库。</p>
<p>从技术角度讲，Vue.js 专注于 MVVM 模型的 <a href="#ViewModel">ViewModel</a> 层。它通过双向数据绑定把 <a href="#视图_View">View</a> 层和 <a href="#模型_Model">Model</a> 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 <a href="#指令_Directives">Directives</a> 和 <a href="#过滤器_Filters">Filters</a>。</p>
<p>从哲学角度讲，Vue 希望通过一个尽量简单的 API 来提供响应式的数据绑定和可组合、复用的视图组件。它不是一个大而全的框架——它只是一个简单灵活的视图层。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时和诸如 Firebase 这一类的 BaaS 服务有着天然的契合度。</p>
<p>Vue.js 的 API 设计深受 <a href="http://angularjs.org" target="_blank" rel="external">AngularJS</a>、<a href="http://knockoutjs.com" target="_blank" rel="external">KnockoutJS</a>、<a href="http://ractivejs.org" target="_blank" rel="external">Ractive.js</a> 和 <a href="http://www.rivetsjs.com" target="_blank" rel="external">Rivets.js</a> 的影响。尽管有不少相似之处，但我们相信 Vue.js 能够在简约和功能之间的微妙平衡中体现出其独有的价值。</p>
<p>即便您已经熟悉了一些这类的库或框架，我们还是推荐您继续阅读接下来的概览，因为您对它们的认识也许和它们在 Vue.js 语境下的定义不尽相同。</p>
<h2 id="概念综述">概念综述</h2><p><img src="/images/mvvm.png" alt="MVVM"></p>
<h3 id="ViewModel">ViewModel</h3><p>一个同步 Model 和 View 的对象。在 Vue.js 中，每个 Vue 实例都是一个 ViewModel。它们是通过构造函数 <code>Vue</code> 或其子类被创建出来的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123; <span class="comment">/* options */</span> &#125;)</span><br></pre></td></tr></table></figure>
<p>这是您作为一个开发者在使用 Vue.js 时主要打交道的对象。更多的细节请移步至 <a href="../api/">Vue 构造函数</a>。</p>
<h3 id="视图_View">视图 View</h3><p>被 Vue 实例管理的 DOM 节点。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vm.$el <span class="comment">// The View</span></span><br></pre></td></tr></table></figure>
<p>Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时，它会递归遍历根元素的所有子结点，同时完成必要的数据绑定。当这个视图被编译之后，它就会自动响应数据的变化。</p>
<p>在使用 Vue.js 时，除了自定义指令 (稍后会有解释)，您几乎不必直接接触 DOM。当数据发生变化时，视图将会自动触发更新。这些更新的粒度精确到一个文字节点。同时为了更好的性能，这些更新是批量异步执行的。</p>
<h3 id="模型_Model">模型 Model</h3><p>一个轻微改动过的原生 JavaScript 对象。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vm.$data <span class="comment">// The Model</span></span><br></pre></td></tr></table></figure>
<p>Vue.js 中的模型就是普通的 JavaScript 对象 —— 也可以称为<strong>数据对象</strong>。一旦某对象被作为 Vue 实例中的数据，它就成为一个 “响应式” 的对象了。你可以操作它们的属性，同时正在观察它的 Vue 实例也会收到提示。Vue.js 把数据对象的属性都转换成了 ES5 中的 getter/setters，以此达到无缝的数据观察效果：无需脏值检查，也不需要刻意给 Vue 任何更新视图的信号。每当数据变化时，视图都会在下一帧自动更新。</p>
<p>Vue 实例代理了它们观察到的数据对象的所有属性。所以一旦一个对象 <code>{ a: 1 }</code> 被观察，那么 <code>vm.$data.a</code> 和 <code>vm.a</code> 将会返回相同的值，而设置 <code>vm.a = 2</code> 则也会修改 <code>vm.$data</code>。</p>
<p>数据对象是被就地转化的，所以根据引用修改数据和修改 <code>vm.$data</code> 具有相同的效果。这也意味着多个 Vue 实例可以观察同一份数据。在较大型的应用程序中，我们也推荐将 Vue 实例作为纯粹的视图看待，同时把数据处理逻辑放在更独立的外部数据层。</p>
<p>值得提醒的是，一旦数据被观察，Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补，我们会为被观察的对象增加 <code>$add</code> , <code>$set</code>和 <code>$delete</code> 方法。</p>
<p>下面是对 Vue.js 数据观测机制实现的高层概览：</p>
<p><img src="/images/data.png" alt="数据观察"></p>
<h3 id="指令_Directives">指令 Directives</h3><p>带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-text</span>=<span class="value">"message"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这里的 div 元素有一个 <code>v-text</code> 指令，其值为 <code>message</code>。Vue.js 会让该 div 的文本内容与 Vue 实例中的 <code>message</code> 属性值保持一致。</p>
<p>Directives 可以封装任何 DOM 操作。比如 <code>v-attr</code> 会操作一个元素的特性；<code>v-repeat</code> 会基于数组来复制一个元素；<code>v-on</code> 会绑定事件等。稍后会有更多的介绍。</p>
<h3 id="Mustache_风格绑定">Mustache 风格绑定</h3><p>你也可以使用 mustache 风格的绑定，不管在文本中还是在属性中。它们在底层会被转换成 <code>v-text</code> 和 <code>v-attr</code> 的指令。比如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"person-&#123;&#123;id&#125;&#125;"</span>&gt;</span>Hello &#123;&#123;name&#125;&#125;!<span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这很方便，不过有一些注意事项：</p>
<p class="tip">一个 <code>&lt;image&gt;</code> 的 <code>src</code> 属性在赋值时会产生一个 HTTP 请求，所以当模板在第一次被解析时会产生一个 404 请求。这种情况下更适合用 <code>v-attr</code>。</p>

<p class="tip">Internet Explorer 在解析 HTML 时会移除非法的内联 <code>style</code> 属性，所以如果你想支持 IE，请在绑定内联 CSS 的时候始终使用 <code>v-style</code>。</p>

<p>你可以使用三对花括号来回避 HTML 代码，而这种写法会在底层转换为 <code>v-html</code>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;&#123; safeHTMLString &#125;&#125;&#125;</span><br></pre></td></tr></table></figure>
<p>不过这种用法会留下 XSS 攻击的隐患，所以建议只对绝对信任的数据来源使用三对花括号的写法，或者先通过自定义的过滤器 (filter) 对不可信任的 HTML 进行过滤。</p>
<p>最后，你可以在你的 mustache 绑定里加入 <code>*</code> 来注明这是一个一次性撰写的数据，这样的话它就不会响应后续的数据变化：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;* onlyOnce &#125;&#125;</span><br></pre></td></tr></table></figure>
<h3 id="过滤器_Filters">过滤器 Filters</h3><p>过滤器是用于在更新视图之前处理原始值的函数。它们通过一个“管道”在指令或绑定中进行处理：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span>&gt;</span>&#123;&#123;message | capitalize&#125;&#125;<span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这样在 div 的文本内容被更新之前，<code>message</code> 的值会先传给 <code>capitalizie</code> 函数处理。更多内容可移步至 <a href="../guide/filters.html">深入了解过滤器 (Filters)</a>。</p>
<h3 id="组件_Components">组件 Components</h3><p><img src="/images/components.png" alt="Component Tree"></p>
<p>在 Vue.js，每个组件都是一个简单的 Vue 实例。一个树形嵌套的各种组件就代表了你的应用程序的各种接口。通过 <code>Vue.extend</code> 返回的自定义构造函数可以把这些组件实例化，不过更推荐的声明式的用法是通过 <code>Vue.component(id, constructor)</code> 注册这些组件。一旦组件被注册，它们就可以在 Vue 实例的模板中以自定义元素形式使用了。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">my-component</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- internals handled by my-component --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">my-component</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这个简单的机制使得我们可以以类似 <a href="http://www.w3.org/TR/components-intro/" target="_blank" rel="external">Web Components</a> 的声明形式对 Vue 组件进行复用和组合，同时无需最新版的浏览器或笨重的 polyfills。通过将一个应用程序拆分成简单的组件，代码库可以被尽可能的解耦，同时更易于维护。更多关于组件的内容，请移步至 <a href="../guide/components.html">组件系统</a>。</p>
<h2 id="简单示例">简单示例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">h1</span>&gt;</span>&#123;&#123;title | uppercase&#125;&#125;<span class="tag">&lt;/<span class="title">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">li</span></span><br><span class="line">      <span class="attribute">v-repeat</span>=<span class="value">"todos"</span></span><br><span class="line">      <span class="attribute">v-on</span>=<span class="value">"click: done = !done"</span></span><br><span class="line">      <span class="attribute">class</span>=<span class="value">"&#123;&#123;done ? 'done' : ''&#125;&#125;"</span>&gt;</span></span><br><span class="line">      &#123;&#123;content&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> demo = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    title: <span class="string">'todos'</span>,</span><br><span class="line">    todos: [</span><br><span class="line">      &#123;</span><br><span class="line">        done: <span class="literal">true</span>,</span><br><span class="line">        content: <span class="string">'Learn JavaScript'</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        done: <span class="literal">false</span>,</span><br><span class="line">        content: <span class="string">'Learn Vue.js'</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>Result</strong></p>
<p><div id="demo"><h1>&#123;&#123;title | uppercase&#125;&#125;</h1><ul><li v-repeat="todos" v-on="click: done = !done" class="&#123;&#123;done ? 'done' : ''&#125;&#125;">&#123;&#123;content&#125;&#125;</li></ul></div></p>
<script>
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn Vue.js'
      }
    ]
  }
})
</script>

<p>也可以通过 <a href="http://jsfiddle.net/yyx990803/yMv7y/" target="_blank" rel="external">jsfiddle</a> 查看。</p>
<p>你可以点击一个 todo 来开关它，也可以打开你的浏览器命令行直接操作 <code>demo</code> 对象：比如改变 <code>demo.title</code>、向 <code>demo.todos</code> 里放入一个新的对象、或开关某个 todo 的 <code>done</code> 状态值。</p>
<p>也许你现在脑子里有很多问题，别担心，我们稍后都会一一提到的。</p>
<p>下一步：<a href="/guide/directives.html">深入了解指令 (Directives)</a>。</p>

    <div class="footer">发现了问题或想要贡献？来 Github 给 Vue.js <a href="https://github.com/vuejs/vuejs.org" target="_blank">英文站点</a>或<a href="https://github.com/Jinjiang/vuejs.org/tree/lang-zh" target="_blank">中文翻译</a>来个 Fork 吧！</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
